<template>
  <beautiful-chat
      :participants="participants"
      :titleImageUrl="titleImageUrl"
      :onMessageWasSent="onMessageWasSent"
      :messageList="messageList"
      :newMessagesCount="newMessagesCount"
      :isOpen="isChatOpen"
      :close="closeChat"
      :open="openChat"
      :showEmoji="true"
      :showFile="true"
      :showEdition="true"
      :showDeletion="true"
      :deletionConfirmation="true"
      :showTypingIndicator="showTypingIndicator"
      :showLauncher="true"
      :showCloseButton="true"
      :colors="colors"
      :alwaysScrollToBottom="alwaysScrollToBottom"
      :disableUserListToggle="false"
      :messageStyling="messageStyling"
      @onType="handleOnType"
      @edit="editMessage"/>
</template>

<script>
import axios from "axios";
import FormData from "form-data";

export default {
  name: 'model-qwen',
  data() {
    return {
      participants: [
        {
          id: 'qwen',
          name: 'AI Bot',
          imageUrl: './web_icon.jpg'
        },
      ], // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
      titleImageUrl: '',
      messageList: [
        {type: 'text', author: `qwen`, data: {text: `Let's chat now!`}}
      ], // the list of the messages to show, can be paginated and adjusted dynamically
      newMessagesCount: 0,
      isChatOpen: true, // to determine whether the chat window should be open or closed
      showTypingIndicator: '', // when set to a value matching the participant.id it shows the typing indicator for the specific user
      colors: {
        header: {
          bg: '#4e8cff',
          text: '#ffffff'
        },
        launcher: {
          bg: '#4e8cff'
        },
        messageList: {
          bg: '#ffffff'
        },
        sentMessage: {
          bg: '#4e8cff',
          text: '#ffffff'
        },
        receivedMessage: {
          bg: '#eaeaea',
          text: '#222222'
        },
        userInput: {
          bg: '#f4f7f9',
          text: '#565867'
        }
      }, // specifies the color scheme for the component
      alwaysScrollToBottom: true, // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
      messageStyling: true // enables *bold* /emph/ _underline_ and such (more info at github.com/mattezza/msgdown)
    }
  },
  methods: {
    sendMessage(text) {
      if (text.length > 0) {
        this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1
        this.onMessageWasSent({author: 'support', type: 'text', data: {text}})
      }
    },
    onMessageWasSent(message) {
      // called when the user sends a message
      this.messageList = [...this.messageList, message]
      if (message.author === "me") {
        console.log(message)
        const FormData = require('form-data');
        let data = new FormData();
        data.append('text', message.data.text);
        let config = {
          method: 'post',
          maxBodyLength: Infinity,
          url: 'https://openapi.sophnet.com/bjriscv01/api/qwen',
          headers: {},
          data : data
        };
        const intervalTime = 1000 * 5
        let intervalId = setInterval(() => {
          axios.request(config)
              .then((response) => {
                let data = response.data
                console.log(data);
                if (data.status === "done") {
                  clearInterval(intervalId)
                  this.messageList = [...this.messageList, {type: 'text', author: `qwen`, data: {text: data.result}}]
                }
              })
              .catch((error) => {
                console.log(error);
              });
        }, intervalTime)
      }
    },
    openChat() {
      // called when the user clicks on the fab button to open the chat
      this.isChatOpen = true
      this.newMessagesCount = 0
    },
    closeChat() {
      // called when the user clicks on the botton to close the chat
      this.isChatOpen = false
    },
    handleScrollToTop() {
      // called when the user scrolls message list to top
      // leverage pagination for loading another page of messages
    },
    handleOnType() {
      console.log('Emit typing event')
    },
    editMessage(message) {
      const m = this.messageList.find(m => m.id === message.id);
      m.isEdited = true;
      m.data.text = message.data.text;
    }
  },
  activated() {
    this.openChat()
  }
}
</script>

<style scoped lang="less">
// CHAI
:deep(.sc-launcher) {
  display: none;
}

:deep(.sc-chat-window) {
  width: 100% !important;
  position: relative !important;
  margin: 0;
  right: 0 !important;
  bottom: 0 !important;
  height: 700px !important;
}

:deep(.sc-message) {
  width: 70%;
}

:deep(.sc-user-input--buttons > :nth-child(2)) {
  display: none !important;
}

:deep(.sc-user-input--buttons > :nth-child(3)) {
  display: none !important;
}
</style>